<template>
     <el-dialog :title="'结算详情: '+propsData.username" :before-close="cancelModal"  :visible.sync="visible" :show-close="false" width="85%" style="margin-bottom:30px" top="50px" :modal="true" :close-on-click-modal="true" :close-on-press-escape="false">
       <!-- 这里的:show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误 -->
       <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button>
       <!-- // 头部总结 -->
        <el-table :data="totalTop" fit highlight-current-row style="width: 100%" max-height="750" :row-class-name="tableRowClassName">
          <el-table-column align="center" label="总金额" >
            <template slot-scope="scope">
              <span>{{scope.row.total_fee}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="可得金额">
            <template slot-scope="scope">
              <span style="color:green;font-size:16px">{{scope.row.withdraw}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="总计（单）">
            <template slot-scope="scope">
              <span>{{scope.row.total_order}}</span>
            </template>
          </el-table-column>
        </el-table>
        <br/>
        <br/>
       <!-- //  详细订单 -->
        <el-table :data="listData" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
          <el-table-column type="index"  align="center" label="序号" width="80"></el-table-column>
          <el-table-column align="center" label="订单号"  width="230">
            <template slot-scope="scope">
              <span>{{scope.row.trade_no}}</span>
            </template>
          </el-table-column>
            <el-table-column align="center" label="交易类型">
            <template slot-scope="scope">
              <span style="color:red">{{scope.row.cash_type | statusName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="订单金额">
            <template slot-scope="scope">
              <span style="color:red;font-size:16px">{{scope.row.total_fee}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="可得金额">
            <template slot-scope="scope">
              <span style="color:red;font-size:16px">{{scope.row.service_fee}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="接单时间">
            <template slot-scope="scope">
              <span>{{scope.row.created_at}}</span>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
        <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
        <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
        <el-tooltip placement="top" content="回到顶部">
          <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
        </el-tooltip>
      </el-dialog>
</template>


<script>
import * as api from '@/api/main-api' // API
import BackToTop from '@/components/BackToTop' // 回到顶部
import { mapGetters } from 'vuex'

export default {
  name: 'lookWithdrawLog',
  components: { BackToTop },

  computed: {
    ...mapGetters([
      'outlet_id'
    ])
  },

  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },

  // 数据过滤
  filters: {
    // 购买方式
    statusName(status) {
      return (status === '1') ? '线上购买' : '货到付款'
    }
  },

  data() {
    return {
      // 回到顶部样式
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
      },

      listQuery: {
        page: 1,
        pagesize: 10
      },

      total: 0,
      listLoading: false,
      listData: [],
      totalTop: [],
      propsData: {}
    }
  },

  methods: {
    // table 样式
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'success-row'
      }
    },

    // 获取数据
    setFetchData(row) {
      if (row) {
        this.propsData = row
        this.listQuery.unit_id = this.outlet_id
        this.listQuery.account_id = row.id
        this.listQuery.admin_id = row.admin_id
      }
      setTimeout(() => {
        this.fetchData()
      }, 20)
    },

    // 控制每页调数
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.setFetchData()
    },

    // 跳页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.setFetchData()
    },

    // 关闭弹窗，触发父组件修改visible值
    cancelModal() {
      this.$emit('update:visible', false)
    },

    // 提现的详细数据
    fetchData() {
      this.listLoading = true
      api.withdrawDetailApi(this.listQuery).then(response => {
        if (response.data.code === 0) {
          this.listData = response.data.data
          this.totalTop = response.data.total_top
          this.total = parseInt(response.data.total)
        }
        this.listLoading = false
      })
    }
  }
//   watch: {
//     visible(v) {
//       if (v) {
//         this.setMothod()
//       }
//     }
//   }

}
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
